import Taro from '@tarojs/taro'
import { CoverView, CoverImage } from '@tarojs/components'

import './index.scss'
import { useCommonStore, useUserStore } from '@/store'

const CustomBar = () => {
    const userStore = useUserStore();
    const tabbarList = userStore.role === "employee"
     ?
    [
        {
            text: "订单",
            pagePath: "/pages/employee/order/index",
            iconPath: "/images/order-unselected.png",
            selectedIconPath: "/images/order-selected.png"
        },
        {
            text: "我的",
            pagePath: "/pages/employee/personal/index",
            iconPath: "/images/personal-unselected.png",
            selectedIconPath: "/images/personal-selected.png"
        }
    ]
    :
    [
        {
            text: "首页",
            pagePath: "/pages/index/index",
            iconPath: "/images/home-unselected.png",
            selectedIconPath: "/images/home-selected.png",
        },
        {
            text: "服务",
            pagePath: "/pages/service/index",
            iconPath: "/images/product-unselected.png",
            selectedIconPath: "/images/product-selected.png"
        },
        {
            text: "订单",
            pagePath: "/pages/order/index",
            iconPath: "/images/order-unselected.png",
            selectedIconPath: "/images/order-selected.png"
        },
        {
            text: "我的",
            pagePath: "/pages/personal/index",
            iconPath: "/images/personal-unselected.png",
            selectedIconPath: "/images/personal-selected.png"
        }
    ]

    const commonStore = useCommonStore();

    const color = '#000';
    const selectedColor = '#6190E8';

    const switchTabBar = (index: number, url: string) => {
        commonStore.setSelectedIndex(index);
        Taro.switchTab({ url });
    }

    return (
        <CoverView className='tab-bar'>
            <CoverView className='tab-bar-border'></CoverView>
            {tabbarList.map((item, index) => {
                return (
                    <CoverView key={index} className='tab-bar-item' onClick={() => switchTabBar(index, item.pagePath)}>
                        <CoverImage src={commonStore.selectedIndex === index ? item.selectedIconPath : item.iconPath} />
                        <CoverView style={{ color: commonStore.selectedIndex === index ? selectedColor : color }}>{item.text}</CoverView>
                    </CoverView>
                )
            })}
        </CoverView>
    )
}

export default CustomBar;